﻿@each $name, $value in $theme-colors {
    $color: $value;

    .custom-switch {
        .custom-control-input {
            &.custom-control-input-#{$name}:checked ~ .custom-control-label::before {
                background-color: $color;
                border-color: $color;
            }

            &.custom-control-input-#{$name}:focus ~ .custom-control-label::before {
                box-shadow: 0 0 0 .2rem rgba($color,.25);
                border-color: $color;
            }

            &:disabled {
                &.custom-control-input-#{$name}:checked ~ .custom-control-label::before {
                    background-color: rgba($color,.5);
                }
            }
        }
    }
}

@mixin switch($size) {
    $width: 1rem;
    $height: 1rem;
    $line-height: 1.5rem;
    $padding-left: 0;

    @if $size == 'xs' {
        $width: .75rem;
        $height: .5rem;
        $line-height: 1rem;
    }
    @else if $size == 'sm' {
        $width: 1rem;
        $height: .75rem;
        $line-height: 1.25rem;
    }
    @else if $size == 'md' {
        $width: 2rem;
        $height: 1.5rem;
        $line-height: 2rem;
        $padding-left: $width;
    }
    @else if $size == 'lg' {
        $width: 3rem;
        $height: 2rem;
        $line-height: 2.5rem;
        $padding-left: $width;
    }
    @else if $size == 'xl' {
        $width: 4rem;
        $height: 2.5rem;
        $line-height: 3rem;
        $padding-left: $width;
    }

    .custom-control-input.custom-control-input-#{$size} {
        + .custom-control-label {
            line-height: $line-height;
            vertical-align: middle;
            padding-left: #{$padding-left};

            &::before {
                height: $height;
                width: calc(#{$width} + (#{$height} / 2));
                border-radius: $height * 2;
            }

            &::after {
                height: calc(#{$height} - 4px);
                width: calc(#{$height} - 4px);
                border-radius: calc(#{$width} - (#{$height} / 2));
            }
        }
    }

    .custom-control-input.custom-control-input-#{$size}:checked {
        ~ .custom-control-label::after {
            transform: translateX(calc(#{$width} - (#{$height} / 2)));
        }
    }
}

.custom-switch {
    @include switch('xs');
}

.custom-switch {
    @include switch('sm');
}

.custom-switch {
    @include switch('md');
}

.custom-switch {
    @include switch('lg');
}

.custom-switch {
    @include switch('xl');
}
